@bar-color: #b8c2cc;
@bar-stroke: #8D99A6;
@border-color: #e0e0e0;
@light-bg: #f5f5f5;
@light-border-color: #ebeff2;
@light-yellow: #fcf8e3;
@text-muted: #666;
@text-light: #555;
@text-color: #333;
@blue: #a3a3ff;
@handle-color: #ddd;

.gantt-container {
	position: relative;
	overflow: auto;
	font-size: 12px;
	.gantt {
		overflow: hidden;
		position: relative;
		.grid-header {
			background: #ffffff;
			border-bottom: 1px solid @border-color;
		}
		.grid-row {
			background: #ffffff;
			border-bottom: 1px solid @border-color;
		}
		.grid-row:nth-child(even) {
			background: @light-bg;
		}
		.row-line {
			border-bottom: 1px solid @light-border-color;
		}
		.tick {
			background: @border-color;
			&.thick {
				background: @bar-color;
			}
		}
		.today-highlight {
			background: @light-yellow;
			opacity: 0.5;
		}
	
		.bar {
			background: @bar-color;
			user-select: none;
			transition: opacity .3s ease;
		}
		.bar-progress {
			background: @blue;
			overflow: hidden;
		}
		.bar-invalid {
			background: transparent;
			border: 1px solid @bar-stroke;
	
			&~.bar-label {
				background: @text-light;
			}
		}
		.bar-label {
			color: #fff;
			font-size: 12px;
			font-weight: lighter;
			white-space: nowrap;
			transform: translate(-50%,-50%);
	
			&.big {
				color: @text-light;
				text-anchor: start;
			}
		}
	
		.handle {
			background: @handle-color;
			cursor: ew-resize;
			opacity: 0;
			visibility: hidden;
			transition: opacity .3s ease;
			&.progress {
				width:0;
				height:0;
				background: none;
				border-width:0 5px 10px;
				border-style:solid;
				border-color:transparent transparent @handle-color;
			}
		}
	
	
		.bar-wrapper {
			cursor: pointer;
			outline: none;
	
			&:hover, &.active {
				.bar {
					background: darken(@bar-color, 5);
					box-shadow: 0 0 0 2px @bar-stroke
				}
	
				.bar-progress {
					background: darken(@blue, 5);
				}
	
				.handle {
					visibility: visible;
					opacity: 1;
				}
			}
		}
	
		.lower-text, .upper-text {
			font-size: 12px;
			white-space: nowrap;
			transform: translate(-50%,-50%);
		}
		.upper-text {
			color: @text-light;
			text-align: center;
		}
		.lower-text {
			color: @text-color;
			text-align: center;
		}
	
		.hide {
			display: none;
		}
	}
	.popup-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.8);
		padding: 0;
		color: #959da5;
		border-radius: 3px;

		.title {
			border-bottom: 3px solid @blue;
			padding: 10px;
		}

		.subtitle {
			padding: 10px;
			color: #dfe2e5;
		}

		.pointer {
			position: absolute;
			height: 5px;
			margin: 0 0 0 -5px;
			border: 5px solid transparent;
			border-top-color: rgba(0, 0, 0, 0.8);
		}
	}
	.bar-arrow {
		.gantt-arrow {
			background: @text-muted;
		}
		.gantt-arrow-icon {
			width:0;
			height:0;
			background: none;
			border-width:5px 0 5px 6px;
			border-style:solid;
			border-color:transparent transparent transparent @text-muted;
		}
	}
}

.gantt-layout {
	display: flex;
	border: 1px solid @border-color;
	// border-bottom: none;
	* {
		moz-user-select: -moz-none;
		-moz-user-select: none;
		-o-user-select:none;
		-khtml-user-select:none;
		-webkit-user-select:none;
		-ms-user-select:none;
		user-select:none;
	}
	.gantt-container {
		flex: 1;
		overflow-y: hidden;
	}
	.gantt-task-table{
		position: relative;
		overflow-x: auto;
		.task-table-header,.task-table-row {
			display: flex;
			align-items: center;
			font-size:12px;
		}
		.task-table-header {
			background: #ffffff;
			border-bottom: 1px solid @border-color;
		}
		.task-table-row {
			background: #ffffff;
			border-bottom: 1px solid @border-color;
		}
		.task-table-row:nth-child(even) {
			background: @light-bg;
		}
		.task-table-header-column,.task-table-column {
			display: flex;
			align-items: center;
			border-right: 1px solid @border-color;
			height: 100%;
			box-sizing: border-box;
			padding:0 10px;
		}
		.task-table-header-column {
			
		}
		.task-table-column {
			word-break:break-all;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.task-table-column-id {
			justify-content: center;
		}
	}
	.gantt-layout-line {
		width: 7px;
		cursor: ew-resize;
		box-sizing: border-box;
		background: #ffffff;
		border-left: 1px solid @border-color;
		border-right: 1px solid @border-color;
		display: flex;
		flex-direction:column;
		justify-content: center;
		.gantt-layout-line-left, .gantt-layout-line-right {
			width: 5px;
			height: 50px;
			border-top: 1px solid @border-color;
			border-bottom: 1px solid @border-color;
			display: flex;
			align-items: center;
			background: @light-border-color;
			cursor: pointer;
			&.hide {
				display: none;
			}
			&:before {
				content:'';
				display:block;
				width:0;
				height:0;
				background: none;
				border-style:solid;
				border-width:5px 5px 5px 0;
				border-color:transparent @text-muted transparent transparent;
			}
		}
		.gantt-layout-line-right {
			margin-top:10px;
			&:before {
				border-width:5px 0 5px 5px;
				border-color:transparent transparent transparent @text-muted;
			}
		}
	}
	.gantt-svg {
		position: absolute;
		box-sizing: border-box;
	}
}